<template>
  <div style="padding-bottom: 10px">
    <div class="row-container">
      <el-popover
        placement="right"
        :visible="isAddRelation"
        :width="300"
        trigger="click"
      >
        <template #reference>
          <el-button type="primary" icon="Edit" @click="openFormDialog">
            关联
          </el-button>
        </template>
        <el-select
          v-model="form.spu"
          placeholder="请选择商品"
          filterable
          v-if="coupon.useType == UseType.COUPON_SPU"
          value-key="spuId"
          @change="changeSpu"
          clearable
        >
          <el-option
            v-for="item in spuList"
            :key="item.spuId"
            :label="item.spuName"
            :value="item"
          ></el-option>
        </el-select>
        <el-cascader
          v-model="form.catalog"
          :options="cateOptions"
          @change="handleCateChange"
          ref="cascaderRef"
          v-if="coupon.useType === UseType.COUPON_CATE"
        />
        <div style="text-align: right; margin: 0">
          <el-button size="small" text @click="isAddRelation = false"
            >取消</el-button
          >
          <el-button size="small" type="primary" @click="submitForm">
            确定
          </el-button>
        </div>
      </el-popover>
    </div>

    <el-table :data="list">
      <el-table-column label="优惠券名称" prop="couponName">
        <template #default="scope">
          {{ coupon.couponName }}
        </template>
      </el-table-column>
      <el-table-column
        label="关联分类"
        prop="categoryName"
        v-if="coupon.useType === UseType.COUPON_CATE"
      ></el-table-column>
      <el-table-column
        label="关联商品"
        prop="spuName"
        v-if="coupon.useType === UseType.COUPON_SPU"
      ></el-table-column>
      <el-table-column label="操作" prop="spuName">
        <template #default="scope">
          <el-button link type="primary" @click="delRelation(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { watch } from "vue";
import { listTreeCategories } from "@/api/mall/server/product/cate";
import { listSpuInfo } from "@/api/mall/server/product/maintain/spu";
import {
  addCouponSpuRelation,
  listCouponSpuRelation,
  delCouponSpuRelation,
} from "@/api/mall/server/marketing/coupon/spuRelation";
import {
  addCouponCategoryRelation,
  listCouponCategoryRelation,
  delCouponCategoryRelation,
} from "@/api/mall/server/marketing/coupon/cateRelation";
const UseType = Object.freeze({
  COUPON_DEFAULT: 0,
  COUPON_CATE: 1,
  COUPON_SPU: 2,
});
const { proxy } = getCurrentInstance();
const props = defineProps({
  coupon: {
    type: Object,
    default: () => ({}),
  },
});
const coupon = ref(props.coupon);
const formRef = ref();
const form = ref({});
const list = ref([]);
const queryParams = ref({
  couponId: coupon.value.id,
});

const getList = async () => {
  let res = {};
  if (coupon.value.useType == UseType.COUPON_CATE) {
    res = await listCouponCategoryRelation(queryParams.value);
  } else {
    res = await listCouponSpuRelation(queryParams.value);
  }
  list.value = res.data;
};
const changeSpu = (val) => {
  console.log(val);
  form.value.spuId = val.spuId;
  form.value.spuName = val.spuName;
};
// 关联操作按钮
const isAddRelation = ref(false);
const openFormDialog = () => {
  isAddRelation.value = true;
};
// 提交表单
const submitForm = async () => {
  console.log(form.value);
  form.value.couponId = coupon.value.id;
  if (coupon.value.useType == UseType.COUPON_CATE) {
    form.value.categoryId = form.value.catalog[form.value.catalog.length - 1];
    await addCouponCategoryRelation(form.value);
  } else if (coupon.value.useType == UseType.COUPON_SPU) {
    await addCouponSpuRelation(form.value);
  }
  await getList();
  isAddRelation.value = false;
};
// 获取分类
const cateOptions = ref([]);
const getCateOptions = async () => {
  const res = await listTreeCategories();
  // 处理cate
  const list = res.data;
  cateOptions.value = formatList(list);
};
const cascaderRef = ref();
const handleCateChange = (val) => {
  const node = cascaderRef.value.getCheckedNodes();
  console.log(node);
  form.value.categoryId = node[0].value;
  form.value.categoryName = node[0].label;
};
watch(
  () => props.coupon,
  (val) => {
    console.log(val);
    coupon.value = val;
    queryParams.value.couponId = coupon.value.id;
    getList();
  },
  {
    deep: true,
    immediate: true,
  }
);
// 替换字段
const formatList = (list) => {
  return list.map((item) => {
    return {
      value: item.catId,
      label: item.name,
      children: item.children ? formatList(item.children) : [],
    };
  });
};
// 获取商品
const spuList = ref([]);
const getSpuList = async () => {
  const res = await listSpuInfo();
  spuList.value = res.rows;
};
// 删除
const delRelation = async (row) => {
  proxy.$modal.confirm("是否删除关联？").then(async () => {
    if (coupon.value.useType == UseType.COUPON_CATE) {
      await delCouponCategoryRelation(row.id);
    } else {
      await delCouponSpuRelation(row.id);
    }
    proxy.$modal.msgSuccess("删除成功");
    getList();
  });
};
Promise.all([getCateOptions(), getSpuList()]);
</script>
